<template>
  <div>
      <div v-show="isshow">
          <div class="isshowTip">
              <p class="confirmpays">{{msgs}}</p>
              <div>
                <Upload
                    :action='uploadurl'
                    :on-success="onSuccess"  
                    :before-upload="onPreview"
                    :on-erroron-error="onError"
                    v-show="isupload"
                >
                    <span class="btn btnpay"><span>+</span>上传缴费凭证</span>
                </Upload>
                <img :src="payPic?payPic:uploadPic" class="payPic" v-if="uploadPic"/>
                <img src="../../assets/empty.png" v-else/>
                <div class="btn-sty">
                  <span class="btn btn-back" @click="back">取消</span>
                  <span class="btn btn-complete" @click="complete">完成</span>
                </div>
              </div>
          </div>
          <div class="mask"></div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'Confirm',
  data(){
    return {
      uploadurl:'/api2'+this.urls.uploadApplicantFile,
      uploadPic:''
    }
  },
  props: ['msgs','modal1','modal11','isshow','isupload','payPic'],
  methods:{
    back(){
      this.$emit('closePage',false)
      this.uploadPic='';
    },
    ok(){
      this.$emit('isshow',false)
    },
    onPreview(){
      this.$Spin.show({
          render: (h) => {
              return h('div', [
                  h('Icon', {
                      'class': 'demo-spin-icon-load',
                      props: {
                          type: 'ios-loading',
                          size: 60
                      }
                  }),
                  h('div', 'Loading')
              ])
          }
      });
    },
    onError(){
       this.$Spin.hide();
       this.$Message.error('上传失败');
    },
    onSuccess(res){
      
      if(res.code==200){
          this.$Spin.hide();
          this.$Message.success('上传成功');
          this.uploadPic=res.data[0].showAdress
      }else{
         this.$Message.error('上传失败');
      }
      
    },
    complete(){
      this.$emit('completeclosePage',this.uploadPic)
      this.uploadPic='';
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  img{
    display: block;
    margin: 0 auto;
    width: 100%;
    height: 310px;
    border:0;
  }
  .btnpay{
    background: #1aa864;
    margin-bottom: 12px;
  }

  .btn{
    background: #2e37cb;
    color: #fff;
    line-height: 30px;
    width: 120px;
    height: 30px;
    display: inline-block;
    margin-left: 50px;
    text-align: center;
    cursor: pointer;
  }

  .mask{
    position: absolute;
    background: #e8eaec;
    top: 0;
    left: 30px;
    right: 0;
    bottom: 0;
    opacity: 0.5;
  }
  
</style>
